<template>
	<!-- 示例：工具类使用 -->
	<view class="container">
		<!-- 示例 1：基础布局 -->
		<view class="example-card">
			<view class="flex items-center justify-between p-md rounded-lg bg-white mb-md">
				<text class="text-lg text-primary">标题</text>
				<text class="text-sm text-grey">副标题</text>
			</view>
		</view>

		<!-- 示例 2：卡片列表 -->
		<view class="example-card">
			<view 
				v-for="item in cardList" 
				:key="item.id"
				class="flex items-center p-lg mb-md rounded-lg bg-white border"
			>
				<view class="w-40 h-40 rounded-full bg-primary mr-md flex items-center justify-center">
					<text class="text-white text-lg">{{ item.name.charAt(0) }}</text>
				</view>
				<view class="flex-1">
					<text class="text-lg text-base-color">{{ item.name }}</text>
					<text class="text-sm text-grey mt-sm block">{{ item.desc }}</text>
				</view>
			</view>
		</view>

		<!-- 示例 3：按钮组 -->
		<view class="example-card">
			<view class="flex justify-end mt-lg">
				<button class="btn-cancel mr-md">取消</button>
				<button class="btn-confirm">确认</button>
			</view>
		</view>

		<!-- 示例 4：文字溢出 -->
		<view class="example-card">
			<view class="w-full p-md bg-grey rounded">
				<text class="text-ellipsis text-base text-base-color">
					这是一段很长的文字，会被截断并显示省略号...
				</text>
			</view>
		</view>

		<!-- 示例 5：间距系统 -->
		<view class="example-card">
			<view class="p-md bg-white rounded">
				<view class="mb-sm">
					<text class="text-sm text-grey">小间距 (mb-sm)</text>
				</view>
				<view class="mb-md">
					<text class="text-sm text-grey">中间距 (mb-md)</text>
				</view>
				<view class="mb-lg">
					<text class="text-sm text-grey">大间距 (mb-lg)</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cardList: [
				{ id: 1, name: '张三', desc: '这是描述信息' },
				{ id: 2, name: '李四', desc: '这是另一段描述信息' },
				{ id: 3, name: '王五', desc: '这是第三段描述信息' }
			]
		}
	}
}
</script>

<style lang="scss">
.container {
	padding: 20px;
	background-color: $uni-bg-color-grey;
}

.example-card {
	margin-bottom: 20px;
}

.btn-cancel {
	@include btn-ghost;
}

.btn-confirm {
	@include btn-primary;
}
</style>

